<template>
  <el-divider content-position="left">组件传值</el-divider>
  <HelloWorld msg="Hello Vue 3.0 + Vite" />
  <el-divider content-position="left">递归快排组件</el-divider>
  <Quick :data="[5,3,1,6,9,4,2,8]" />
  <el-divider content-position="left">TelePort标签，将标签dom插入到指定选择器中，可以是和#app不同的地方</el-divider>
  <TelePort />
  <el-divider content-position="left">异步组件</el-divider>
  <!--  异步组件 -->
  <Suspense>
    <!--    需要显示的结果 -->
    <template #default>
      <AsyncCom :timeout="3000" />
    </template>
    <!--    结果没出来之前显示的内容 -->
    <template #fallback>
      <div>
        <Loading text="异步结果没出来之前" />
      </div>
    </template>
  </Suspense>
</template>

<script>
  import HelloWorld from './HelloWorld.vue'
  import Quick from './Quick.vue'
  import TelePort from './Teleport.vue'
  import AsyncCom from './AsyncComponent.vue'
  import Loading from './Loading.vue'
  import {ref} from 'vue'

  export default {
    name: "Home",
    components: {
      HelloWorld,
      Quick,
      TelePort,
      AsyncCom,
      Loading
    },
    setup() {
      const color = ref('')
      color.value = 'red'
      return {
        color
      }
    }
  }
</script>

<style lang="scss" scoped>
  .vue3-class {
    color: v-bind(color)
  }
</style>
